<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>saz.js saz.scene</title>
<meta name="language" content="ja" />

<style type="text/css">
.navi li{
	float: left;
	list-style: none;
	margin-right: 1px;
	padding: 0 10px;
	background: #ccc;
	font-weight: bold;
}
#navHilite{
	position: absolute;
	width: 30px;
	height: 4px;
	background: #f66;
}
.page{
	position: absolute;
	clear: both;
	
	width: 640px;
	height: 480px;
	margin-top: 30px;
	color: #ccc;
	background: #666;
	border: 1px dotted #999;
}
.page h2{
	margin: 0;
	padding: 0;
	text-align: center;
	font-family: 'Verdana', sans-serif;
	font-size: 100px;
	line-height: 480px;
}
</style>
</head>
<body>
<h1>saz.js saz.scene</h1>
<div id="container">
<p>クリック↓</p>
<ul class="navi">
	<li id="intro">intro</li>
	<li id="top">top</li>
</ul>
<div id="navHilite"></div>
<div class="page" id="introPage"><h2>Intro</h2></div>
<div class="page" id="topPage"><h2>Top</h2></div>
</div>

<script type="text/javascript" src="../libs/dojo/dojo.js"></script>
<script type="text/javascript" src="../libs/easel.js"></script>
<script type="text/javascript" src="../libs/tween.js"></script>

<script type="text/javascript" src="js/saz.js"></script>
<script type="text/javascript" src="js/saz.deferred.js"></script>
<script type="text/javascript" src="js/saz.scene.js"></script>

<script type="text/javascript">

// init DOM
var introPage = dojo.byId('introPage');
var topPage = dojo.byId('topPage');

dojo.query('.page').style('opacity', 0);
dojo.query('#topPage>h2').style('opacity', 0);

var navHilite = dojo.byId('navHilite');
// 座標
var introPos = dojo.coords(dojo.byId('intro'));
dojo.style(navHilite, {
	'top': (introPos.t + introPos.h + 1) + 'px',
	'left': '0px',
	'width': (introPos.w - 1) + 'px'
});


// Scene
var intro = new SAZ.scene.Scene('intro');
intro.from = function(scene) {
	console.log('intro.from');
	//return SAZ.deferred.tween(Tween.get(introPage.style, {css:true}).to({opacity:1},1000));
	var pos = dojo.coords(dojo.byId('intro'));
	var p = SAZ.deferred.tween(
		Tween.get(introPage.style, {css:true}).to({opacity:1},1000)
	);
	var n = SAZ.deferred.tween(
		Tween.get(navHilite.style, {css:true}).to({left:pos.l, width:pos.w-1}, 1000, Ease.backOut)
	);
	// DeferredListで並列処理
	dojo.require('dojo.DeferredList');
	var d = new dojo.DeferredList([p,n]);
	return d;
};
intro.to = function(scene) {
	console.log('intro.to');
	return SAZ.deferred.tween(Tween.get(introPage.style, {css:true}).to({opacity:0},1000));
};

var top = new SAZ.scene.Scene('top');
top.from = function(scene) {
	console.log('top.from');
	
	// 順番に実行したい: Deferredを使った場合
	
	var pos = dojo.coords(dojo.byId('top'));
	var d = new dojo.Deferred();
	var res = d.then(SAZ.deferred.thenTween(Tween.get(navHilite.style, {css:true}).to({left:pos.l, width:pos.w-1}, 1000, Ease.backOut)))
		.then(SAZ.deferred.thenWait(1000))	// 1秒待つ
		.then(SAZ.deferred.thenTween(Tween.get(topPage.style, {css:true}).to({opacity:1},1000)))
		.then(SAZ.deferred.thenTween(Tween.get(dojo.query('#topPage>h2')[0].style, {css:true}).to({opacity:1},1000)));
	
	// 「最初の」Deferredを忘れずに実行する
	d.resolve();
	// チェインの「最後の」Deferredを返す
	return res;
};
top.to = function(scene) {
	console.log('top.to');
	
	// 順番に実行したい: Tweenを使って書いてみる
	
	// 次につなぐためだけに、空のDeferredを生成
	var d = new dojo.Deferred();
	// NodeListからDOMを取り出すには、[index]を使う
	Tween.get(dojo.query('#topPage>h2')[0].style, {css:true}).to({opacity:0},1000);
	Tween.get(topPage.style, {css:true}).wait(1000).to({opacity:0},1000).call(function(){
		// 空Deferredを忘れずに実行する
		d.resolve();
	});
	return d;
};

// SceneContainer
var sman = new SAZ.scene.SceneContainer('main');
sman.add(intro);
sman.add(top);


// ボタン設定
dojo.connect(dojo.byId('intro'), 'onclick', function() {
	sman.change('intro').then(function() {
		console.log('+ COMP! +')
	});
});
dojo.connect(dojo.byId('top'), 'onclick', function() {
	sman.change('top').then(function() {
		console.log('+ COMP! +')
	});
});

</script>

</body>
</html>
